﻿@model PlanetTelex.Coverflow.Models.CoverflowPart
@{ Style.Require("Coverflow").AtHead(); }
@{ Style.Require("Coverflow_Admin").AtHead(); }
@{ Script.Require("Json").AtHead(); }
@{ Script.Require("jQuery_iPhoneSwitch").AtHead(); }
@{ Script.Require("jQueryUI_Coverflow").AtHead(); }
@{ Script.Require("jQueryUI_Coverflow_Admin").AtHead(); }

<fieldset>
    <legend>Coverflow</legend>
    <label>Please select the folder containing the coverflow images: @Html.DropDownListFor(o => o.SelectedMediaFolder, Model.AllMediaFolders)</label>
    <div id="coverflowOptionsAdminPanel">
        <div id="options">            
            <div id="optionsPanel">
                <h3>Edit Coverflow Options</h3>
                <div>
                    <ul class="validationMessage hidden"></ul>
                    <div id="optionsForm">
                        <section class="generalSettings">
                            <h4>General Settings</h4>
                            <ul>
                                <li>
                                    <label for="coverWidth" title="The width of each cover.">Cover width:</label>
                                    <input id="coverWidth" type="text" />
                                    <abbr>px</abbr>
                                </li>
                                <li>
                                    <label for="coverHeight" title="The height of each cover.">Cover height:</label>
                                    <input id="coverHeight" type="text" />
                                    <abbr>px</abbr>
                                </li>
                                <li>
                                    <label for="startingIndex" title="The first cover in the center selected position.">Starting index:</label>
                                    <select id="startingIndex"></select>
                                    <abbr>&nbsp;</abbr>
                                </li>
                                <li>
                                    <label for="slideAnimationRadius" title="The number of covers animated when selected covers change.">Slide animation radius:</label>
                                    <select id="slideAnimationRadius"></select>
                                    <abbr>covers</abbr>
                                </li>
                            </ul>
                        </section>
                        <section class="backgroundCovers">
                            <h4>Background Covers</h4>
                            <ul>
                                <li>
                                    <label title="The size of the background covers as a percentage of the center selected cover.">Background cover size:&nbsp;&nbsp;<small id="backgroundCoverSize"></small> % <small id="biggerSmaller"></small></label>
                                    <br class="clear"/>
                                    <span id="backgroundCoverSizeSlider"></span>
                                    <sub><small class="floatLeft">-50%</small>0<small class="floatRight">+50%</small></sub>
                                </li>
                                <li>
                                    <label title="The percent the two covers directly to the right and left of the center cover are covered by it.">Inner cover overlap:&nbsp;&nbsp;<small id="innerCoverOverlap"></small> %</label>
                                    <br class="clear"/>
                                    <span id="innerCoverOverlapSlider"></span>
                                    <sub><small class="floatLeft">-100%</small>0<small class="floatRight">+100%</small></sub>
                                </li>
                                <li>
                                    <label title="The percent the background covers not directly to the right and left are covered by adjoining covers.">Outer cover overlap:&nbsp;&nbsp;<small id="outerCoverOverlap"></small> %</label>
                                    <br class="clear"/>
                                    <span id="outerCoverOverlapSlider"></span>
                                    <sub><small class="floatLeft">-100%</small>0<small class="floatRight">+100%</small></sub>
                                </li>
                            </ul>
                        </section>
                        <section class="autoplay">
                            <h4>Autoplay<span class="onOffSwitch"></span></h4>
                            <p class="hidden">Autoplay currently disabled.</p>
                            <ul>
                                <li>
                                    <label for="flipInterval" class="short" title="The number of seconds between auto flips.">Flip Interval:</label>
                                    <select id="flipInterval">
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                    </select>
                                    <abbr>seconds</abbr>
                                </li>
                                <li>
                                    <label for="flipsPerCategory" class="short" title="When categories are enabled, autoplay will play this many covers before each auto flip.">Flips per category:</label>
                                    <select id="flipsPerCategory"></select>
                                    <abbr>&nbsp;</abbr>
                                </li>
                                <li>
                                    <label for="pauseOnHover" class="long" title="Autoplay should pause when the mouse is over the coverflow.">Pause on hover:</label>
                                    <input id="pauseOnHover" class="checkbox" type="checkbox"/>
                                    <abbr>&nbsp;</abbr>
                                </li>
                            </ul>
                        </section>
                        <section class="categories">
                            <h4>Categories<span class="onOffSwitch"></span></h4>
                            <p class="hidden">Categories currently disabled.</p>
                            <ul>
                                <li>
                                    <label for="displayCategoriesNav" class="long" title="Display a clickable list of categories.">Display navigation:</label>
                                    <input id="displayCategoriesNav" class="checkbox" type="checkbox"/>
                                    <abbr>&nbsp;</abbr>
                                </li>
                                <li>
                                    <label for="categoriesStateful" class="long" title="Each category remembers its selected cover, otherwise each coverflow resets to the first cover when categories are changed.">Categories are stateful:</label>
                                    <input id="categoriesStateful" class="checkbox" type="checkbox"/>
                                    <abbr>&nbsp;</abbr>
                                </li>
                                <li>
                                    <label for="defaultCategory" class="short" title="If a category isn't specified for some data item, it is assigned this category.">Default category:</label>
                                    <input id="defaultCategory" type="text" />
                                    <abbr>&nbsp;</abbr>
                                </li>
                                <li>
                                    <label for="startingCategory" class="short" title="The first category displayed.">Starting category:</label>
                                    <select id="startingCategory" class="long"><option>- Not set -</option></select>
                                    <abbr>&nbsp;</abbr>
                                </li>
                                <li>
                                    <label for="animateIn" class="short" title="Animate in this many covers when categories change.">Animate in:</label>
                                    <select id="animateIn" class="short"></select>
                                    <abbr>covers</abbr>
                                </li>
                                <li>
                                    <label for="animateOut" class="short" title="Animate out this many covers when categories change.">Animate out:</label>
                                    <select id="animateOut" class="short"></select>
                                    <abbr>covers</abbr>
                                </li>
                            </ul>
                        </section>
                        <section class="perspective">
                            <h4>Perspective<span class="onOffSwitch"></span></h4>
                            <p class="hidden">Perspective currently disabled.</p>
                            <ul>
                                <li>
                                    <label title="The angle of the perspective skew. For realism, stick to values less than 25, but venture beyond for psychedlic effects.">Angle:&nbsp;&nbsp;<small id="angle"></small> &deg;</label>
                                    <br class="clear"/>
                                    <span id="angleSlider"></span>
                                    <sub><small class="floatLeft">0 &deg;</small><small class="floatRight">180 &deg;</small></sub>
                                    <br class="clear"/>
                                </li>
                                <li>
                                    <label title="The time, in milliseconds, the animation to and from a perspective takes.">Animation duration:&nbsp;&nbsp;<small id="animationDuration"></small> ms</label>
                                    <br class="clear"/>
                                    <span id="animationDurationSlider"></span>
                                    <sub><small class="floatLeft">0 ms</small><small class="floatRight">1000 ms</small></sub>
                                    <br class="clear"/>
                                </li>
                                <li>
                                    <label title="It looks good when the two covers directly to the right and left of the center animate at a different speed. This adjusts the inner background covers' animation duration as a percentage of the standard duration.">Inner cover animation:&nbsp;&nbsp;<small id="innerCoverAnimationOffset"></small> % <small id="fasterSlower">slower</small></label>
                                    <br class="clear"/>
                                    <span id="innerCoverAnimationOffsetSlider"></span>
                                    <sub><small class="floatLeft">faster</small><small class="floatRight">slower</small></sub>
                                </li>
                            </ul>
                        </section>
                        <section class="reflections">
                            <h4>Reflections<span class="onOffSwitch"></span></h4>
                            <p class="hidden">Reflections currently disabled.</p>
                            <ul>
                                <li>
                                    <label title="The opacity level where the reflection touches the cover. 0 is transparaent, while 100 is fully opaque.">Initial opacity:&nbsp;&nbsp;<small id="initialOpacity"></small></label>
                                    <br class="clear"/>
                                    <span id="initialOpacitySlider"></span>
                                    <sub><small class="floatLeft">transparent</small><small class="floatRight">opaque</small></sub>
                                    <br class="clear"/>
                                </li>
                                <li>
                                    <label title="The length of the reflection as a percentage of the cover.">Length:&nbsp;&nbsp;<small id="reflectionLength"></small> %</label>
                                    <br class="clear"/>
                                    <span id="reflectionLengthSlider"></span>
                                    <sub><small class="floatLeft">0%</small><small class="floatRight">100%</small></sub>
                                </li>
                            </ul>
                        </section>
                        <section class="slider">
                            <h4>Slider<span class="onOffSwitch"></span></h4>
                            <p class="hidden">Slider currently disabled.</p>
                            <ul>
                                <li>
                                    <label title="The width of the slider bar as a percentage of the container.">Width:&nbsp;&nbsp;<small id="sliderWidth"></small> %</label>
                                    <br class="clear"/>
                                    <span id="sliderWidthSlider"></span>
                                    <sub><small class="floatLeft">0%</small><small class="floatRight">100%</small></sub>
                                </li>
                            </ul>
                        </section>
                        <section class="titles">
                            <h4>Titles<span class="onOffSwitch"></span></h4>
                            <p class="hidden">Titles currently disabled.</p>
                        </section>
                    </div>
                </div>
                <h3>Settings Json String</h3>
                <div id="jsonView">
                    <textarea rows="20" cols="20"></textarea>
                    @Html.HiddenFor(o => o.SettingsJson, Model.SettingsJson)
                </div>
                <h3>Coverflow Preview <span id="changeMessage">(You must save before preview will reflect your changes)</span></h3>
                <div>
                    <div id="coverflowOptionsAdminPreview" class="coverflow">
                        @if (Model.Covers != null)
                        {
                            foreach (var cover in Model.Covers)
                            {
                                <img src="@cover.ImagePath" alt="@cover.Title" data-title="@cover.Title" data-subtitle="@cover.Subtitle" data-category="@cover.Category" />
                            }
                        }
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                // Initialize coverflow options, admin form, json inputs, and preview.
                var hidePreview = "Hide Preview";
                var showPreview = "Show Preview";
                var initialSettings = $("#jsonView input").val();

                if (initialSettings == "") hideCoverflow();
                else eval("pt.coverflow.admin.coverflowOptions = " + $("#jsonView input").val() + ";");

                pt.coverflow.admin.updateForm(true);
                updateJsonString();
                var $coverflow = $("#coverflowOptionsAdminPreview").coverflow(pt.coverflow.admin.coverflowOptions);
                var savedFolder = $("#SelectedMediaFolder").val();
                var categoriesEnabled = pt.coverflow.admin.coverflowOptions.categories.enabled;

                // Hide preview entirely if nothing to preview.
                if (pt.coverflow.admin.numberOfCovers == 0) {
                    $("#options > h5").hide();
                    $("#coverflowOptionsAdminPreview").hide();
                }

                // Updates the json input and display with values from coverflowOptions.
                function updateJsonString() {
                    var jsonString = JSON.stringify(pt.coverflow.admin.coverflowOptions);
                    $("#jsonView input").val(jsonString);
                    $("#jsonView textarea").html(pt.json.format(jsonString));
                }

                function hideCoverflow() {
                    if ($coverflow != null)
                        $coverflow.coverflow("destroy");
                    $("#coverflowOptionsAdminPreview").hide();
                    $("#refreshCoverflow").hide();
                    $("#hideShowCoverflow").html(showPreview);
                }

                function showCoverflow() {
                    $("#coverflowOptionsAdminPreview").show();
                    $("#refreshCoverflow").show();
                    $("#changesLabel").hide();
                    $("#hideShowCoverflow").html(hidePreview);
                    $coverflow = $("#coverflowOptionsAdminPreview").coverflow(pt.coverflow.admin.coverflowOptions);
                }

                function toggleSaveMessage(selectedFolder) {
                    var folderChanges = selectedFolder != null && selectedFolder != savedFolder;
                    var categoryChanges = categoriesEnabled != pt.coverflow.admin.coverflowOptions.categories.enabled;
                    if (folderChanges || categoryChanges)
                        $("#changeMessage").show();
                    else
                        $("#changeMessage").hide();
                }

                // Initialize accordion.
                $("#optionsPanel").accordion({
                    active: false,
                    collapsible: true,
                    change: function () {
                        pt.coverflow.admin.updateOptions();
                        updateJsonString();
                    }
                });

                // Update json input and form on textarea change.
                $("#jsonView textarea").change(function () {
                    eval("pt.coverflow.admin.coverflowOptions = " + $("#jsonView textarea").val() + ";");
                    pt.coverflow.admin.updateForm(true);
                    $("#jsonView input").val(JSON.stringify(pt.coverflow.admin.coverflowOptions));
                    $("#changesLabel").show();
                });

                // Provide a toggle button for the coverflow preview.
                $("#hideShowCoverflow").click(function () {
                    if ($(this).html() == hidePreview)
                        hideCoverflow();
                    else
                        showCoverflow();
                });

                // Update options from form and refresh preview.
                $("#refreshCoverflow").click(function () {
                    pt.coverflow.admin.updateOptions();
                    $coverflow.coverflow("destroy");
                    $coverflow = $("#coverflowOptionsAdminPreview").coverflow(pt.coverflow.admin.coverflowOptions);
                    $("#changesLabel").hide();
                    toggleSaveMessage();
                });

                // Make sure json input is current prior to saving.
                $(".save-button, .publish-button, .publish-later-datetime").mouseenter(function () {
                    pt.coverflow.admin.updateOptions();
                    updateJsonString();
                });

                // Notification of changes that require save.
                $("#SelectedMediaFolder").change(function () {
                    toggleSaveMessage($(this).val());
                });
            });
        </script>
    </div>
</fieldset>
